<template>
  <div class="cart">
    <h1>购物车</h1>
    
    <div v-if="cartItems.length > 0" class="cart-container">
      <div class="cart-items">
        <div v-for="item in cartItems" :key="item.id" class="cart-item">
          <img :src="item.image" :alt="item.name" class="item-image">
          <div class="item-details">
            <h3 class="item-name" v-text="item.name"></h3>
            <p class="item-price">¥<span v-text="item.price"></span></p>
          </div>
          <div class="item-quantity">
            <button @click="decreaseQuantity(item)" :disabled="item.quantity <= 1">-</button>
            <span class="quantity" v-text="item.quantity"></span>
            <button @click="increaseQuantity(item)">+</button>
          </div>
          <div class="item-total">
            ¥<span v-text="(item.price * item.quantity).toFixed(2)"></span>
          </div>
          <button @click="removeItem(item)" class="remove-btn">删除</button>
        </div>
      </div>
      
      <div class="cart-summary">
        <div class="summary-item">
          <span>商品总价:</span>
          <span>¥<span v-text="subtotal.toFixed(2)"></span></span>
        </div>
        <div class="summary-item">
          <span>运费:</span>
          <span v-if="shipping > 0">¥<span v-text="shipping.toFixed(2)"></span></span>
          <span v-else class="free-shipping">免运费</span>
        </div>
        <div class="summary-item">
          <span>优惠券:</span>
          <span v-if="discount > 0" class="discount">-¥<span v-text="discount.toFixed(2)"></span></span>
          <span v-else>-</span>
        </div>
        <div class="summary-item total">
          <span>总计:</span>
          <span>¥<span v-text="total.toFixed(2)"></span></span>
        </div>
        <button @click="checkout" class="checkout-btn">去结算</button>
      </div>
    </div>
    
    <div v-else class="empty-cart">
      <p>购物车为空</p>
      <router-link to="/products" class="continue-shopping">继续购物</router-link>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { mockCartItems } from '../utils/mockData.js'

export default {
  name: 'Cart',
  setup() {
    const router = useRouter()
    
    // 使用模拟购物车数据
    const cartItems = ref(mockCartItems)
    
    const shipping = ref(0) // 运费
    const discount = ref(50) // 优惠金额
    
    // 计算商品总价
    const subtotal = computed(() => {
      return cartItems.value.reduce((sum, item) => {
        return sum + (item.price * item.quantity)
      }, 0)
    })
    
    // 计算总价
    const total = computed(() => {
      return subtotal.value + shipping.value - discount.value
    })
    
    const increaseQuantity = (item) => {
      item.quantity++
    }
    
    const decreaseQuantity = (item) => {
      if (item.quantity > 1) {
        item.quantity--
      }
    }
    
    const removeItem = (item) => {
      const index = cartItems.value.findIndex(i => i.id === item.id)
      if (index !== -1) {
        cartItems.value.splice(index, 1)
      }
    }
    
    const checkout = () => {
      router.push('/checkout')
    }
    
    return {
      cartItems,
      shipping,
      discount,
      subtotal,
      total,
      increaseQuantity,
      decreaseQuantity,
      removeItem,
      checkout
    }
  }
}
</script>

<style scoped>
.cart {
  padding: 2rem 0;
}

.cart h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.cart-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

.cart-items {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1.5rem;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.cart-item:last-child {
  border-bottom: none;
}

.item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 1rem;
}

.item-details {
  flex: 1;
}

.item-name {
  margin-bottom: 0.5rem;
  color: #333;
}

.item-price {
  color: #e91e63;
  font-weight: bold;
}

.item-quantity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1rem;
}

.item-quantity button {
  width: 25px;
  height: 25px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

.item-quantity button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quantity {
  min-width: 30px;
  text-align: center;
  font-weight: bold;
}

.item-total {
  font-weight: bold;
  color: #333;
  margin-right: 1rem;
  min-width: 80px;
}

.remove-btn {
  background: #f44336;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.remove-btn:hover {
  background: #d32f2f;
}

.cart-summary {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 1.5rem;
  height: fit-content;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.summary-item:last-child {
  border-bottom: none;
  margin-bottom: 1.5rem;
}

.summary-item.total {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

.free-shipping {
  color: #42b983;
  font-weight: bold;
}

.discount {
  color: #e91e63;
  font-weight: bold;
}

.checkout-btn {
  width: 100%;
  background-color: #e91e63;
  color: white;
  border: none;
  padding: 1rem;
  font-size: 1.1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.checkout-btn:hover {
  background-color: #c2185b;
}

.empty-cart {
  text-align: center;
  padding: 3rem;
}

.empty-cart p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #666;
}

.continue-shopping {
  color: #42b983;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
}

.continue-shopping:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .cart-container {
    grid-template-columns: 1fr;
  }
  
  .cart-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .item-image {
    margin-bottom: 1rem;
  }
  
  .item-quantity, .item-total, .remove-btn {
    margin-top: 0.5rem;
    margin-right: 0;
  }
}
</style>